<template>
  <!-- banner -->
  <div class="banner">
    <div class="main-container">
      <div class="banner-box">
        <div class="c-box">
          <div>
            <h1>机械工业发展论坛</h1>
          </div>
          <div class="location-box">
            <div class="title-en">2024 Machinery Industry Forum</div>
            <div class="location-text">北京国家会议中心</div>
          </div>
          <div class="date-location-box">
            <div>2024年5月6-10日</div>
            <div class="location-city-text">中国·北京</div>
          </div>
          <div class="banner-btn-box">
            <div class="exhibitor-login-btn">参展商登录</div>
            <div class="login-btn">人员登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
};
</script>

<style scoped>
/* banner-start */
.banner {
  width: 100%;
  height: 626px;
  background-image: url(@/assets/images/forum-banner.png);
  /* background-color: #1f42e8; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
.banner-box {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  height: 626px;
}
.location-box {
  display: flex;
  margin-top: 30px;
  font-size: 28px;
}
.banner .c-box h1 {
  color: #000a82;
  font-size: 92px;
  letter-spacing: 0px;
}
.banner .title-en {
  color: #fff;
  /* width: 444px; */
  /* height: 48px; */
  padding: 4px 12px;
  background: #000a82;
}
.banner .location-text {
  color: #000a82;
  border: 1px solid #000a82;
  padding: 4px 12px;
}
.date-location-box {
  display: flex;
  margin-top: 46px;
  font-size: 26px;
  color: #000a82;
}
.location-city-text {
  margin-left: 32px;
}
.banner .banner-btn-box {
  display: flex;
  margin-top: 60px;
}
.banner .exhibitor-login-btn {
  padding: 6px 60px;
  background-color: #000a82;
  font-size: 30px;
  color: #fff;
  border-radius: 4px;
}
.login-btn {
  padding: 6px 60px;
  background-color: #000a82;
  margin-left: 32px;
  font-size: 30px;
  color: #fff;
  border-radius: 4px;
}
/* banner-end */
</style>